<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
	<div th:replace="~{commons/template::style}"></div>
	<title>成绩管理</title>

</head>

<body>
<div th:replace="~{commons/template::head}"></div>

<div class="container-fluid">
	<div class="row">
		<div th:replace="~{commons/template::leftSide(active='score')}"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2>成绩管理</h2>

			<div class="table-responsive" th:fragment="detail">
				<table class="table table-striped table-sm">
					<form class="form-inline" th:action="@{/selectScore}">
						<div class="row">
							<div class="col-md-4"></div>
							<div class="col-md-3">
								<div class="form-group">
									<input type="text" name="searchName" class="form-control" id="searchName" placeholder="学生名">
								</div>
							</div>
							<div class="col-md-2">
								<input type="submit" value="查询" class="btn btn-primary">
								<input type="button" id="insert" value="新增" class="btn btn-success">
							</div>
							<div class="col-md-3"></div>
						</div>
						<div class="row">
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<tr>
									<td align="center">成绩ID</td>
									<td align="center">学生ID</td>
									<td align="center">学生姓名</td>
									<td align="center">课程ID</td>
									<td align="center">课程名</td>
									<td align="center">考试次数</td>
									<td align="center">成绩</td>
									<td align="center">功能</td>
								</tr>
							</div>
							<div class="col-md-2"></div>
						</div>
						<div class="row">  <!--  内容  -->
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<tbody id="t1">
								<tr th:each="score:${pageInfo.getList()}">
									<td align="center" th:text="${score.getScoreId()}"></td>
									<td align="center" th:text="${score.getStuId()}"></td>
									<td align="center" th:text="${score.getStuName()}"></td>
									<td align="center" th:text="${score.getCourseId()}"></td>
									<td align="center" th:text="${score.getCourseName()}"></td>
									<td align="center" th:text="${score.getScoreTime()}"></td>
									<td align="center" th:text="${score.getScoreScore()}"></td>
									<td align="center">
										<input type="button" class="btn btn-info" value="修改" id="update" th:name="${score.getScoreId()}">
										<input type="button" class="btn btn-outline-danger" value="删除" th:name="${score.getScoreId()}">
									</td>
								</tr>
								</tbody>
							</div>
							<div class="col-md-2"></div>
						</div>
						<div class="row">
							<div class="col-md-3"></div>
							<div class="col-md-1"><button id="prePage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getPrePage()}]])">上一页</button></div>
							<div class="col-md-1">当前第：<a name="pageNum" id="pageNum" th:text="${pageInfo.getPageNum()}"></a>页</div>
							<div class="col-md-1">总共：<a name="pages" id="pages" th:text="${pageInfo.getPages()}"></a>页</div>
							<div class="col-md-1">共：<a name="total" id="total" th:text="${pageInfo.getTotal()}"></a>条记录</div>
							<div class="col-md-1">
								<select name="pageSize" id="pageSize" onchange="changePage(1)" class="form-control-sm">
									<option value="5" th:selected="${pageInfo.getPageSize()==5}">每页5条</option>
									<option value="10" th:selected="${pageInfo.getPageSize()==10}">每页10条</option>
									<option value="15" th:selected="${pageInfo.getPageSize()==15}">每页15条</option>
									<option value="20" th:selected="${pageInfo.getPageSize()==20}">每页20条</option>
								</select>
							</div>
							<div class="col-md-1">
								<button id="nextPage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getNextPage()}]])">下一页</button>
							</div>
							<div class="col-md-3"></div>
						</div>
					</form>
				</table>
			</div>
		</main>
	</div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<form id="form">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增/修改[成绩]</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body" id="content">
					<tr>
						<td>
							<span id="sIdN">成绩ID：</span>
							<input id="sId" type="text" placeholder="成绩ID" name="scoreId" readonly>
						</td>
					</tr>
					<tr>
						<td align="center">
							<span id="stuIdName">学生ID号：</span><input id="stuId" type="text" placeholder="学生ID" name="stuId">
						</td>
						<td align="center">
							<span id="stuNameName">学生姓名：</span><input id="stuName" type="text" placeholder="学生姓名" name="stuName" readonly>
						</td>
					</tr>
					<tr>
						<h6 id="courseIdName">所修课程：</h6>
					</tr>
					<tr>
						<td>
							<select class="form-control" id="courseId" name="courseId">
							</select>
						</td>
					</tr>
					<tr>
						<td align="center">
							<mark>考试次数：</mark><input id="scoreTime" type="text" placeholder="考试次数" name="scoreTime">
						</td>
						<td align="center">
							<mark>成绩：</mark><input id="scoreScore" type="text" placeholder="成绩" name="scoreScore">
						</td>
					</tr>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
					<button type="button" class="btn btn-primary" id="save" onclick="sav()">保存</button>
				</div>
			</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div th:replace="~{commons/template::script}"></div>
</body>
<script>
	/* 学生ID的input失去焦点  自动填入学生姓名  如果没有学生姓名 则提示没有这个学生 */
	/* 从选课表中 根据stuId 搜索本学期 学生选中的课程id join tab_course的courseName 填入select中 value为id html为课程名*/
	$("#stuId").blur(function () {
		$.ajax({
			url:"selectCourseByStuIdFromChoose",
			data:{id:$(this).val()},
			type:"get",
			dataType:"json",
			success:function (data) {
				if (data.state){
					$("#stuName").val(data.info[0].stuName);
					$("#courseId").html("")
					$("#courseId").append("<option value=''>--选择课程--</option>");
					for (var i=0;i<data.info.length;i++){
						$("#courseId").append("<option value='"+data.info[0].courseId+"'>"+data.info[0].courseName+"</option>");
					}
					$("#save").attr("disabled",false);
				}else {
					alert(data.message);
					$("#save").attr("disabled",true);
				}
			}
		})
	})
	$("#insert").click(function (){
		$("#form")[0].reset(); /* 对【表单】的重置  所以选定的是 form表单的id */
		$("#sIdN").hide();
		$("#sId").hide();
		$("#myModal").modal('show');
	})
	function sav() {
		$.ajax({
			url:"insertOrUpdateScore",
			data:{scoreId:$("#sId").val(),
				stuId:$("#stuId").val(),
				stuName:$("#stuName").val(),
				courseId:$("#courseId").val(),
				scoreTime:$("#scoreTime").val(),
				scoreScore:$("#scoreScore").val()},
			type:"post",
			dataType:"json",
			success:function (result){
				alert(result.message)
				window.location.href="http://localhost:8080/selectScore";
			}
		})
	}
	$("#t1").on("click","input[value='修改']",function() {
		/* 修改只能修改成绩，其他的不能修改  即 其他的项目要改为 readonly */
		$("#form")[0].reset();
		$("#sId").show();
		$("#sIdN").show();
		$("#stuId").hide();
		$("#stuName").hide();
		$("#courseId").hide();
		$("#stuIdName").hide();
		$("#stuNameName").hide();
		$("#courseIdName").hide();
		$.ajax({
			url:"selectScoreByScoreId",
			data:{scoreId:this.name},
			type:"get",
			dataType:"json",
			async:false,
			success:function (score){
				$("#sId").val(score.scoreId)
				$("#scoreTime").val(score.scoreTime)
				$("#scoreScore").val(score.scoreScore)
			}
		})
		$("#save").removeAttr("disabled");
		$("#myModal").modal('show');
	})
	$("#t1").on("click","input[value='删除']",function (){
		let SID = this.name;
		if(confirm("确定删除该课程的所有信息？")){
			$.ajax({
				url:"deleteScoreInfo",
				data:{SID:SID},
				type:"get",
				dataType:"json",
				success:function (result){
					alert(result.message)
					window.location.href="http://localhost:8080/selectScore";
				}
			})
		}
	})
</script>
</html>